<template>
  <div class="i-box">
    <div class="i-head">
      {{prefix}}贷款
    </div>
    <div class="i-loan-content">
      <input-item>
        <p slot="name">{{prefix}}贷款总额</p>
        <input class="tit-input" id="money" name="money" type="number" slot="input" v-model="money"
               @input="money=$_numberUtil.checkPosNumber(money)">
        <p class="i-right" slot="right">万元</p>
      </input-item>
      <input-item>
        <p slot="name">{{prefix}}贷款年数</p>
        <div slot="input" class="tit-input">{{times}}</div>
        <p class="i-right" slot="right" @click="showPicker">年></p>
      </input-item>
      <input-item>
        <p slot="name">{{prefix}}贷款利率</p>
        <input class="tit-input" id="rate" name="rate" type="number" slot="input" v-model="rate"
               @input="rate=$_numberUtil.checkPosNumber(rate)">
        <p slot="right">%</p>
      </input-item>
    </div>
  </div>
</template>

<script>
  import InputItem from "@/components/common/InputItem";


  export default {
    name: "LoanItem",
    props: {
      prefix:{
        type:String,
        default:''
      }
    },
    data() {
      return {
        money: 0,
        rate: 3.25,
        times: 1,
        years:[],
        picker:null
      }
    },
    methods: {
      showPicker(){
        if (!this.picker) {
          this.picker = this.$createPicker({
            title: '选择年数',
            data: [this.years],
            onSelect: this.selectHandle,
          })
        }
        this.picker.show()
      },
      selectHandle(selectedVal, selectedIndex, selectedText){
        this.times=selectedVal[0]
      },
      resetMoney(){
        this.money = 0
      }
    },
    components: {
      InputItem,
    },
    created() {
      for(let i=0;i<30;i++){
        let text=(i+1)+'年('+(i+1)*12+'期)'
        this.years.push({
          text:text,
          value:i+1
        })
      }
    },
  }
</script>

<style scoped>
  .i-box {

  }
  .tit-input {
    text-align: right;
    border: none;
    width: 100%;
  }
  .i-head{
    width: 100%;
    height: 3rem;
    background-color: var(--color-bg-gray);
    text-align: left;
    padding-left: 2rem;
    line-height: 3rem;
  }

</style>
